<template>
  <div class="page-container">
    <SearchPanel @change="handleSearchPanelChange">
      <el-form ref="queryForm" class="query-more-form" size="mini" label-width="100px" :model="query">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select class="w-100" v-model="query.versionName" placeholder="请选择状态"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="坐席/分机">
              <el-input v-model="query.versionName" class="search-ipt" placeholder="请输入坐席/分机" maxlength="255" />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="btn-col text-right">
            <el-button size="mini" class="search-btn">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </SearchPanel>
    <div class="table-container">
      <div class="table-list-panel of-auto"
        :style="{'height': isShow?'calc(100vh - 330px)':'calc(100vh - 255px)'}"
      >
        <!-- // 卡片 -->
        <div class="flex-wrap flex-between-center">
          <CaseCardItem v-for="(item,index) in listData" :key="index" :obj="item"/>
          <!-- 防止flex布局换行 1920分辨率下最多5个 START -->
          <div style="width: 300px"/>
          <div style="width: 300px"/>
          <div style="width: 300px"/>
          <div style="width: 300px"/>
          <div style="width: 300px"/>
          <!-- END -->
        </div>
      </div>
      <div class="pagination-panel">
        <Pagination
          :total="query.total"
          :page.sync="query.page"
          :limit.sync="query.size"
          @pagination="initData"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import SearchPanel from '@/components/SearchPanel'
  import Pagination from '@/components/Pagination'
  import CaseCardItem from '@/components/CaseCardItem'
  export default {
    name: 'CaseDealDispatch',
    components:{
      SearchPanel,Pagination,
      CaseCardItem
    },
    data(){
      return {
        query:{
          total: 1,
          page: 1,
          size: 10
        },
        listData:[
          {name: '张三',no: '0001',status: 1,statusName: '在线 呼出已接通',time: '02：23：00'},
          {name: '张三',no: '0001',status: 2,statusName: '在线 呼出已接通',time: '02：23：00'},
          {name: '张三',no: '0001',status: 3,statusName: '在线 呼出已接通',time: '02：23：00'},
          {name: '张三',no: '0001',status: 1,statusName: '在线 呼出已接通',time: '02：23：00'},
          {name: '张三',no: '0001',status: 1,statusName: '在线 呼出已接通',time: '02：23：00'},
          {name: '张三',no: '0001',status: 1,statusName: '在线 呼出已接通',time: '02：23：00'},
          {name: '张三',no: '0001',status: 1,statusName: '在线 呼出已接通',time: '02：23：00'},
          {name: '张三',no: '0001',status: 1,statusName: '在线 呼出已接通',time: '02：23：00'},
          {name: '张三',no: '0001',status: 1,statusName: '在线 呼出已接通',time: '02：23：00'},
          {name: '张三',no: '0001',status: 1,statusName: '在线 呼出已接通',time: '02：23：00'},
          {name: '张三',no: '0001',status: 1,statusName: '在线 呼出已接通',time: '02：23：00'},
        ],
        isShow: true
      }
    },
    methods: {
      handleSearchPanelChange(flag){
        this.isShow = flag
      },
      initData(){

      }
    },
  }
</script>

<style lang="scss" scoped>

</style>